<template>
  <div class="filter-tab">
    <div class="nav">
      <div
        class="item"
        v-for="(item, index) in list"
        :key="item.id"
        @click="activeChange(index)"
        :class="{ active: activeIndex == index }"
      >
        {{ item.tit }}
        <i
          v-if="item.flag"
          class="iconfont"
          :class="
            activeJt[index] ? 'icon-xialajiantouxiao' : 'icon-shouqijiantouxiao'
          "
          @click="jtChange(index)"
        ></i>
      </div>
      <van-cell is-link @click="showPopup">筛选</van-cell>
      <van-popup position="right" v-model="show">
        <div class="popup-cont">
          <div class="section">
            <div class="stit">价格区间</div>
            <div class="scont">
              <div>
                <input type="text" placeholder="最低价" ref="min" />
              </div>
              <span>---</span>
              <div>
                <input type="text" placeholder="最高价" ref="max" />
              </div>
            </div>
          </div>
          <div class="footer">
            <button @click="resetPrice">重置</button>
            <button @click="yesPrice">确定</button>
          </div>
        </div>
      </van-popup>
    </div>
    <good-list
      :showStyle="showFlag"
      :show="false"
      :list="listData"
      v-if="listData.length"
    >
    </good-list>
    <div class="no-goods" v-else>
      <img :src="noUrl" alt="" />
      <p>亲，您还没有相关数据哦！</p>
    </div>
  </div>
</template>

<script>
// import listData from "@/mock/goodList.json";
import goodList from "@/views/home/components/homeIndex/list.vue";
import { getList } from "@/api/list";
// listData.data.sort((a, b) => a.goods_id - b.goods_id);
export default {
  data() {
    return {
      activeIndex: 0,
      list: [
        {
          tit: "综合",
          id: "001",
          flag: true,
        },
        {
          tit: "新品",
          id: "002",
          flag: false,
        },
        {
          tit: "销量",
          id: "003",
          flag: false,
        },
        {
          tit: "价格",
          id: "004",
          flag: true,
        },
      ],
      activeJt: [true, "", "", true],
      listData: [],
      // listData: JSON.parse(JSON.stringify(listData.data)),
      showFlag: true,
      show: false,
      noUrl: require("@/assets/no.png"),
      id: 1131,
      sort: "goods_id",
      order: "asc",
    };
  },
  components: {
    goodList,
  },
  created() {
    this.id = this.$route.params.id;
    this.getData();
  },
  computed: {},
  methods: {
    activeChange(index) {
      this.activeIndex = index;
      switch (index) {
        case 0:
          // this.listData.sort((a, b) => {
          //   if (this.activeJt[index]) {
          //     return a.goods_id - b.goods_id;
          //   } else {
          //     return b.goods_id - a.goods_id;
          //   }
          // });
          this.sort = "goods_id";
          if (this.activeJt[index]) {
            this.order = "desc";
          } else {
            this.order = "asc";
          }
          this.getData();
          break;
        case 1:
          // this.listData.sort((a, b) => {
          //   return b.add_time - a.add_time;
          // });
          this.sort = "last_update";
          this.getData();
          break;
        case 2:
          // this.listData.sort((a, b) => {
          //   return b.sale - a.sale;
          // });
          this.sort = "sales_volume";
          this.getData();
          break;
        case 3:
          // this.listData.sort((a, b) => {
          //   if (!this.activeJt[index]) {
          //     return parseInt(a.shop_price) - parseInt(b.shop_price);
          //   } else {
          //     return parseInt(b.shop_price) - parseInt(a.shop_price);
          //   }
          // });
          this.sort = "shop_price";
          if (this.activeJt[index]) {
            this.order = "desc";
          } else {
            this.order = "asc";
          }
          this.getData()
          break;
        default:
          break;
      }
    },
    jtChange(index) {
      this.$set(this.activeJt, index, !this.activeJt[index]);

      switch (index) {
        case 0:
          this.order == "desc" ? (this.order = "asc") : (this.order = "desc");
          this.getData();
          break;
        case 3:
          // this.listData.sort((a, b) => {
          //   if (!this.activeJt[index]) {
          //     return parseInt(a.shop_price) - parseInt(b.shop_price);
          //   } else {
          //     return parseInt(b.shop_price) - parseInt(a.shop_price);
          //   }
          // });
          this.sort = "shop_price";
          if (this.activeJt[index]) {
            this.order = "desc";
          } else {
            this.order = "asc";
          }
          this.getData()
          break;
        default:
          break;
      }
      this.listData;
    },
    showPopup() {
      this.show = true;
    },
    resetPrice() {
      //
      this.sort = "goods_id";
      this.order = "asc";
    },
    yesPrice() {
      let min = Number(this.$refs.min.value);
      let max = Number(this.$refs.max.value);
      this.listData = this.listData.filter((value) => {
        return value.shop_price >= min && value.shop_price <= max;
      });
    },
    getData() {
      getList({
        sort: this.sort,
        order: this.order,
        cat_id: this.id,
      }).then((res) => {
        console.log(res);
        this.listData = res.data.data;
      });
    },
  },
};
</script>

<style lang="less" scoped>
.filter-tab {
  margin-top: 4.4rem;
  text-align: center;
  width: 100%;
  height: 3.6rem;
  .nav {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-size: 1.3rem;
    background-color: #fff;
    border-top: 1px solid #f1f1f1;
    .item {
      flex: 1;
    }
    .active {
      color: red;
    }
    .popup-cont {
      width: 90vw;
      height: 100vh;
      .section {
        padding: 1rem;
        height: 10rem;
        box-sizing: border-box;
        background-color: #fff;
        .stit {
          font-size: 1.6rem;
          text-align: left;
          font-weight: 600;
        }
        .scont {
          margin-top: 1rem;
          display: flex;
          justify-content: space-around;
          align-items: center;
          height: 4rem;
          input {
            height: 4rem;
            width: 14.1rem;
            border-radius: 4rem;
            font-size: 1.4rem;
            text-align: center;
            background-color: #f4f4f4;
          }
        }
      }
      .footer {
        display: flex;
        height: 6.3rem;
        width: 100%;
        background-color: #fff;
        position: fixed;
        justify-content: space-around;
        align-items: center;
        box-sizing: border-box;
        padding: 1rem;
        bottom: 0;
        button {
          flex: 1;
          height: 4.3rem;
          border-radius: 2.2rem;
          margin: 0 1rem;
        }
        button:first-child {
          border: 1px solid #f92028;
          color: #f92028;
          background-color: #fff;
        }
        button:last-child {
          background-color: #f92028;
          color: #fff;
          border: 1px solid #fff;
        }
      }
    }
  }
  .no-goods {
    background-color: #f4f4f4;
    width: 100%;
    height: calc(100vh - 8rem);
    img {
      margin-top: 5rem;
      width: 12rem;
    }
    p {
      font-size: 1.4rem;
      color: #999;
      height: 3rem;
      line-height: 3rem;
    }
  }
}
.icon-xialajiantouxiao,
.icon-shouqijiantouxiao {
  font-size: 0.6rem;
}
/deep/ .van-cell {
  flex: 1;
  width: auto;
  background-color: transparent;
  padding: 0;
  i {
    display: none;
  }
  div {
    text-align: center;
  }
}
/deep/ .van-popup {
  border-radius: 1rem 0 0 1rem;
}
</style>